<script lang="ts">
import { defineComponent, ref, onUnmounted, onMounted } from 'vue'
import NavButton from '../components/NavButton.vue'
import { getHotGoods } from '../api/shop'
import { showToast } from 'vant'
import { useLoginStore } from '../stores/login'
import { useCarStore } from '../stores/shopcar'
import { computed } from 'vue'
import router from '@/router'
export default defineComponent({
  components: {
    NavButton
  },
  setup() {
    const loginFlag = ref(true)

    const codeFlag = ref(false)

    const teleFlag = ref(false)

    const codeNull = ref(false)

    const successLogin = ref(false)

    const phone = ref('')

    const codeNum = ref('')

    const reg = /^1[3-9]\d{9}$/

    const code = /^[0-9]{4}$/

    const tokenValue = ref()

    const loading = ref(true)

    const finished = ref(false)

    const carFlag = ref(false)

    const ToastFlag = ref(false) // 轻提示

    const shopNum = ref()

    let carArr: any = ref([])

    let LoginStore = useLoginStore()

    let carStore: any = useCarStore()

    // 登录数据
    let loginUserInfo: any = ref<any>({
      phone: '15016553149',
      password: 'Abc123'
    })

    // 定义一个定时器
    const timer = ref()

    // 验证码登录判断
    const getCode = () => {
      if (!reg.test(phone.value)) {
        teleFlag.value = true

        timer.value = setTimeout(() => {
          teleFlag.value = false
        }, 1000)
        return
      }
      codeFlag.value = true

      timer.value = setTimeout(() => {
        codeFlag.value = false
      }, 1000)
    }

    // 登录判断
    const login = () => {
      if (!reg.test(phone.value)) {
        teleFlag.value = true

        timer.value = setTimeout(() => {
          teleFlag.value = false
        }, 1000)
        return
      }

      if (!code.test(codeNum.value)) {
        codeNull.value = true
        timer.value = setTimeout(() => {
          codeNull.value = false
        }, 1000)
        return
      }

      successLogin.value = true
      timer.value = setTimeout(() => {
        successLogin.value = false
      }, 1000)

      LoginStore.$patch((state) => {
        state.token = loginUserInfo._rawValue.phone
      })

      tokenValue.value = LoginStore.token
      console.log(tokenValue.value)
    }

    // ------------------

    var HotList: any = ref<Array<any>>([])

    const getHotGoodsFun: () => void = (): void => {
      getHotGoods().then((data: any) => {
        console.log(data)
        HotList.value = data.data.list
      })
    }

    // 定义一个定时器
    const timertwo = ref()

    const onLoad = () => {
      timertwo.value = setTimeout(() => {
        getHotGoodsFun()
        loading.value = true
        if (HotList.value) {
          finished.value = true
        }
      }, 1500)
    }

    // const onSubmit = () => showToast('点击按钮')
    let checked: any = ref(false)

    // 拿到购物车数据
    const getCarList = () => {
      carArr.value = carStore.carList

      if (carArr.value.length == 0) {
        carFlag.value = true
      } else {
        carFlag.value = false
      }
    }

    // 实现购物车功能

    // 删除数据功能
    const del = (id: any) => {
      // 获取id对应下标
      let index: any = carArr.value.findIndex((item: any) => {
        return item.id == id
      })

      carArr.value.splice(index, 1)

      if (carArr.value.length == 0) {
        carFlag.value = true
      }
    }

    // 修改数据数量
    const setCount = (id: any) => {
      // 获取id对应下标
      let index: any = carArr.value.findIndex((item: any) => {
        return item.id == id
      })

      // console.log(index)

      carArr.value[index].count

      // console.log(carArr.value)
    }

    // 全选功能

    // 计算属性
    let toggleAll = computed({
      get: () => {
        return carArr.value.every((item: any) => {
          return item.is_checked
        })
      },
      set: (value) => {
        carArr.value.forEach((item: any) => {
          item.is_checked = value
        })
      }
    })

    let totalPrice: any = ref(1)
    // 计算总价格
    let totalData = computed(() => {
      return carArr.value.reduce((total: any, item: any) => {
        if (item.is_checked) {
          return (total += item.price * item.count)
        }
        return total
      }, 0)
    })

    console.log(totalData.value)

    // 定义一个定时器
    const timerthree = ref()

    // 提交订单
    const goOrder = () => {
      let ids: any = []
      carArr.value.forEach((item: any) => {
        if (item.is_checked) {
          // 选中
          ids.push(item.id)
        }
      })
      if (ids.length) {
        router.push({
          path: '/submit',
          query: {
            ids,
            totalPrice: totalPrice.value
          }
        })
      } else {
        ToastFlag.value = true

        timerthree.value = setTimeout(() => {
          ToastFlag.value = false
        }, 1000)
      }
    }

    const detailHander = (path: any, goods_id: any) => {
      router.push({
        path,
        query: {
          goods_id
        }
      })
    }

    onUnmounted(() => {
      clearTimeout(timer.value)
      timer.value = ''
      clearTimeout(timertwo.value)
      timertwo.value = ''
      clearTimeout(timerthree.value)
      timerthree.value = ''
    })

    onMounted(() => {
      getCarList()
      getHotGoodsFun()
      tokenValue.value = LoginStore.token
    })

    return {
      loginFlag,
      getCode,
      phone,
      codeFlag,
      teleFlag,
      login,
      codeNum,
      codeNull,
      successLogin,
      tokenValue,
      loading,
      finished,
      onLoad,
      HotList,
      carFlag,
      // onSubmit,
      checked,
      carStore,
      carArr, // 购物车数据
      del, // 删除数据
      setCount, // 修改数量
      shopNum, // 当前的商品数量
      toggleAll, // 全选
      totalData, // 计算的总价格
      goOrder, // 提交订单
      ToastFlag, // 轻提示
      detailHander
    }
  }
})
</script>

<template>
  <!-- 请求登录界面 -->
  <div class="box" v-if="!tokenValue">
    <div class="login" v-if="loginFlag">
      <!-- 登录注册界面 -->
      <div class="logo"><img src="../../src/assets/img01/mihayou.png" alt="" /></div>
      <div class="login_box">
        <!-- 取消按钮 -->
        <div class="cancel" @click="loginFlag = false">
          <img src="../../src/assets/img01/quxiao.png" alt="" />
        </div>
        <van-tabs>
          <van-tab title="验证码登录">
            <!-- 验证码登录 -->
            <div class="code_content">
              <input type="text" placeholder="手机号注册/登录" class="tele" v-model="phone" />
              <div class="code">
                <input type="text" placeholder="验证码" v-model="codeNum" /><span @click="getCode"
                  >获取验证码</span
                >
              </div>

              <div class="login_btn" @click="login">登录</div>
              <div class="register"><span>登录遇到问题?</span><span>立即注册</span></div>
              <p>
                未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守<span
                  >《米哈游通行证用户服务协议》《米哈游通行证用户个人信息及隐私保护政策》</span
                >
              </p>
            </div>
          </van-tab>
          <van-tab title="密码登录">
            <!-- 密码登录 -->
            <div class="password_content">
              <input type="text" placeholder="手机号注册/登录" class="tele" />
              <input type="password" placeholder="密码" class="code" />
              <div class="login_btn">登录</div>
              <div class="register"><span>登录遇到问题?</span><span>立即注册</span></div>
              <p>
                登录即代表您同意并遵守<span
                  >《米哈游通行证用户服务协议》《米哈游通行证用户个人信息及隐私保护政策》</span
                >
              </p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <h1 class="title">购物车</h1>
    <div class="content">
      <img src="../../src/assets/img01/newworld.webp" alt="" />
      <span>快快开启新世界～</span>
      <div class="login_btn" @click="loginFlag = true">登录</div>
    </div>
    <!-- 轻提示 -->
    <div class="showCode" v-if="codeFlag">获取验证码成功</div>
    <div class="showCode" v-if="teleFlag">请输入正确的手机号码</div>
    <div class="showCode" v-if="codeNull">验证码错误</div>
    <div class="showCode" v-if="successLogin">登录成功</div>
    <NavButton :active="1" />
  </div>

  <!-- 登陆完成后的界面 -->
  <div class="content" v-if="tokenValue && carFlag">
    <h2 class="title">购物车</h2>
    <div class="carimg">
      <img src="../../src/assets/img01/shopcar.webp" alt="" />
      <p>您的购物车空空如也~</p>
    </div>
    <!-- 热销商品 -->
    <div class="hotgoods">
      <h3 class="hottitle">热销商品</h3>
      <div class="hotcontent"></div>
    </div>
    <!-- 商品 -->
    <div class="goods">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="shop_show">
          <div
            class="shop_item"
            v-for="item in HotList"
            :key="item.goods_id"
            @click="detailHander('/detail', item.goods_id)"
          >
            <img
              :src="item.cover_url"
              alt=""
              referrerpolicy="no-referrer"
              v-lazy="item.cover_url"
            />
            <div class="shop_dec txt-cut">
              <!-- recommend -->
              <img :src="item.tag == 1 ? '../../src/assets/img01/new.png' : ''" alt="" />{{
                item.name
              }}
            </div>
            <div class="price">
              <i>￥</i><span>{{ item.price / 100 }}</span
              ><span class="zero">.00</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>

  <!-- 加入购物车的后的页面 -->
  <div class="shopCar" v-if="tokenValue && !carFlag">
    <h2 class="title"><i class="iconfont icon-zuojian" @click="$router.back()"></i>购物车</h2>
    <div class="shopbag-list">
      <div class="shopbag-list-item" v-for="item in carArr" :key="item.id">
        <van-swipe-cell>
          <div>
            <div class="shopbag-item">
              <div class="check-box">
                <van-checkbox checked-color="#0C34BA" v-model="item.is_checked"></van-checkbox>
              </div>
              <div class="shopbag-item-img">
                <img :src="item.cover_url || item.def_img" alt="" />
              </div>
              <div class="shopbag-item-content">
                <div class="shopbag-name">
                  <div class="zhname-box">
                    <div class="zhname one-text">{{ item.name }}</div>
                    <!-- <div class="rule one-text">88</div> -->
                  </div>
                  <div class="enname one-text">
                    {{ item.style }}
                  </div>
                </div>

                <div class="price-count">
                  <div class="price">{{ (item.price / 100).toFixed(2) }}</div>
                  <div class="count">
                    <van-stepper
                      theme="round"
                      button-size="22"
                      v-model="item.count"
                      @change="setCount(item.id)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <template #right>
            <van-button square color="#e4393c" @click="del(item.id)" text="删除" />
          </template>
        </van-swipe-cell>
      </div>
      <div style="width: 100%; height: 50px"></div>
    </div>
    <!-- @submit="onSubmit" -->
    <van-submit-bar @submit="goOrder" :price="totalData" button-text="提交订单">
      <van-checkbox v-model="toggleAll">全选</van-checkbox>
    </van-submit-bar>
    <!-- 轻提示 -->
    <div class="showCode" v-if="ToastFlag">请选择商品</div>
  </div>

  <!-- <div class="car" style="margin-bottom: 200px">
    <span v-for="(item, index) in carStore.carList" :key="index">{{ item.id }}</span>
  </div> -->
  <NavButton :active="1" />
</template>

<style scoped lang="scss">
// 请求登录界面
.box {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .title {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    border-bottom: 1px solid #eee;
  }
  .content {
    width: 160px;
    height: 160px;
    position: absolute;
    top: 40%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    span {
      font-size: 14px;
      display: block;
      margin-top: 10px;
      color: #9696a1;
    }
    .login_btn {
      width: 80px;
      margin: 20px auto;
      text-align: center;
      padding: 10px;
      color: #fff;
      border-radius: 20px;
      background-color: #ff6d6d;
    }
  }
}

.login {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  .login_box {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 360px;
    border-radius: 20px;
    background-color: #fff;
  }
  .logo {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: auto;
    img {
      width: 100%;
    }
  }
  .cancel {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 10px;
    height: 10px;
    img {
      width: 100%;
    }
  }
}

// 登陆完成后的界面
.content {
  .title {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  .carimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #fff;
    height: auto;
    padding: 30px 0;
    img {
      display: block;
      width: 50%;
    }
    p {
      margin-top: 10px;
      font-size: 14px;
      color: #9696a1;
    }
  }
  // 热销商品
  .hotgoods {
    padding: 0 12px;
    .hottitle {
      margin: 10px 0;
    }
  }
  .goods {
    .shop_show {
      display: flex;
      padding: 0 12px;
      flex-wrap: wrap;
      margin-top: 18px;
      font-size: 14px;
      justify-content: space-between;
      .shop_item {
        width: 49%;
        border-radius: 3px;
        margin-bottom: 10px;
        background-color: #fff;
        img {
          width: 100%;
        }
        .shop_dec {
          line-height: 18px;
          padding: 8px;
          padding-bottom: 0;
          margin-bottom: 7px;
          img {
            margin-right: 8px;
            display: inline-block;
            width: 40px;
            vertical-align: bottom;
          }
        }
        .price {
          padding-left: 5px;
          font-size: 14px;
          color: #16162e;
          font-style: italic;
          font-weight: 700;
          margin-bottom: 15px;
          i {
            font-size: 12px;
            font-style: italic;
            font-family: 'Fira Sans Black Italic';
          }
          span {
            font-family: 'Fira Sans Black Italic';
          }
          .zero {
            font-size: 12px;
          }
        }
      }
    }
  }
}

// 加入购物车的后的页面
.shopCar {
  .title {
    position: relative;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    i {
      position: absolute;
      left: 10px;
    }
  }
  .shopbag-list {
    .shopbag-list-item {
      margin-bottom: 10px;
    }
    .shopbag-item {
      display: flex;
      padding: 10px;
      align-items: center;
      background-color: #ffffff;
    }

    .shopbag-item .check-box {
      width: 20px;
      height: 20px;
    }

    .shopbag-item .price {
      font-size: 14px;
      font-weight: bold;
      color: #e4393c;
      margin-right: auto;

      font-weight: 700;
      font-family: 'Fira Sans Black Italic';
      font-style: italic;
    }

    .shopbag-item .enname {
      font-size: 12px;
      color: #999;
      margin-top: 3px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      width: 152px;
      height: 32px;
      overflow: hidden;
    }

    .shopbag-item .zhname {
      font-size: 14px;
      // max-width: 100px;
      -webkit-box-orient: vertical;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .shopbag-item .rule {
      margin-left: 20px;
      color: #666;
      font-size: 14px;
      max-width: 100px;
    }

    .shopbag-item .shopbag-name {
      height: 40px;
    }

    .shopbag-item .price-count {
      height: 40px;
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .shopbag-item .zhname-box {
      display: flex;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 150px;
    }

    .shopbag-item .shopbag-item-img {
      width: 80px;
      height: 80px;
      // background-color: #ddd;
      margin: 0 10px;
      border: 1px solid #f9fafb;
    }

    .shopbag-item .shopbag-item-img img {
      width: 100%;
    }

    .shopbag-item .shopbag-item-content {
      width: calc(100% - 20px - 20px - 80px);
      height: 80px;
    }
    .van-swipe-cell__right button {
      height: 100%;
      color: white;
      background: rgb(228, 57, 60);
      border-color: rgb(228, 57, 60);
    }
  }
}

// 验证码登录
.code_content,
.password_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  .tele {
    padding: 10px 12px;
    line-height: 18px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    margin: 15px 0;
  }
  .code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    line-height: 18px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    input {
      border: 0;
      padding-right: 15px;
      border-right: 1px solid #eee;
    }
  }
  .login_btn {
    line-height: 38px;
    margin: 15px 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-color: #ff6d6d;
    border-radius: 20px;
  }
  .register {
    display: flex;
    justify-content: space-between;
    color: #7f858a;
    margin-bottom: 15px;
  }
  p {
    line-height: 18px;
    span {
      color: #7f858a;
      padding-left: 26px;
    }
  }
}

// 穿透
.van-submit-bar ::v-deep .van-submit-bar__bar {
  height: 60px;
}
.login ::v-deep .van-tabs__line {
  width: 25px;
  background-color: #ff6d6d;
}
.login ::v-deep .van-tabs {
  margin-top: 20px;
}
.van-tabs ::v-deep .van-tabs__wrap {
  border-radius: 20px;
}

.showCode {
  position: fixed;
  bottom: 50%;
  left: 50%;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  transform: translate(-50%, -50%);
  background-color: #999;
  z-index: 99999;
}
</style>
